<style scoped>
</style>

<template >
	<div class="vue-box">
		<div class="c-panel">
			<!-- 参数栏 -->
			<div class="c-title">检索参数</div>
			<el-form size="mini" :inline="true" @submit.native.prevent >
				<el-form-item label="名称查询：">
					<el-input v-model="p.name" placeholder="请输入物业名称"></el-input>
				</el-form-item>
				<el-form-item style="min-width: 0px;">
					<el-button type="primary" icon="el-icon-search" @click="p.pageNo = 1; f5()">查询</el-button>
					<!-- <el-button type="primary" icon="el-icon-plus" @click="add()">添加</el-button> -->
				</el-form-item>
			</el-form>
			<!-- 数据列表 -->
			<div class="c-title">数据列表</div>
			<el-table :data="propertyList" size="mini">
				<el-table-column label="物业id" prop=propertyId width="200px"></el-table-column>
				<el-table-column label="物业名称" prop="propertyName"></el-table-column>
				<el-table-column label="详情描述" prop="propertyDetails"></el-table-column>
				<el-table-column label="抽成比例" prop="propertyShare"></el-table-column>
				<!-- <el-table-column label="显示开关">
					<template slot-scope="s">
						<el-switch v-model="s.row.property_softdel" :active-value="2" :inactive-value="1" inactive-color="#ff4949"></el-switch>
						<span style="color: #999;" v-if="s.row.property_softdel==1">正常</span>
						<span style="color: #999;" v-else>禁用</span>
					</template>
				</el-table-column> -->
				<!-- <el-table-column label="文字按钮" width="150px">
					<template slot-scope="s">
						<el-button type="text" size="mini" @click="get(s.row)">查看</el-button>
						<el-button type="text" size="mini" @click="update(s.row)">修改</el-button>
						<el-button type="text" size="mini" @click="del(s.row)">删除</el-button>
					</template>
				</el-table-column> -->
				<el-table-column label="正常按钮" width="240px">
					<template slot-scope="s">
						<el-button class="c-btn" type="primary" icon="el-icon-edit" @click="update(s.row.propertyId)">修改</el-button>
						<el-button class="c-btn" type="danger" icon="el-icon-delete" @click="del(s.row.propertyId)">解约</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="page-box">
				<el-pagination background
					layout="total, prev, pager, next, sizes, jumper"
					:current-page.sync="p.pageNo"
					:page-size.sync="p.pageSize"
					:total="dataCount"
					:page-sizes="[1, 3, 5, 10, 20, 30, 40, 50, 100]"
					@current-change="f5()"
					@size-change="f5()">
				</el-pagination>
			</div>
		</div>

		<!-- 增改组件 -->
		<add-or-update ref="add-or-update"></add-or-update>

	</div>
</template>



<script>
	import mockDataList from './mock-data-list.js';
	import addOrUpdate from './property-add-or-update.vue';
	export default {
		components: {
			addOrUpdate
		},
		data() {
			return {
				p: {		// 查询参数
					name: null,
					propertyId:null,
					pageNo: 1,
					pageSize: 10,
				},
				dataCount: 0,
				propertyList: [],		// 数据集合
			}
		},
		methods: {
        // 无精度损失的乘法
	// f1: function(arg1) {
	// 		var m = 0,
	// 			s1 = arg1.toString(),
	// 			t;
	// 		t = s1.split(".");
	// 		// 判断有没有小数位，避免出错
	// 		if (t[1]) {
	// 			m += t[1].length
	// 		}
	// 		return Number(s1.replace(".", "")) / Math.pow(10, m)
	// 	},

			// 刷新
			f5: function(){
				// alert("test");
			// 	this.sa.ajax(
			// 	'/e-administrator/property/getPropertyList',
			// 		{'propertyName':this.p.name},
			// 	function(res){
			// 	alert(res.data[6].propertyId);
			// 		this.propertyList = res.data;	// 数据
			// 		this.dataCount = res.dataCount;	// 分页
			// 	}.bind(this),
			// // {res: mockDataList},
			// {type:'get',res: mockDataList},
			// );
			var i = localStorage.getItem("token");
			this.sa.ajax(
                '/e-administrator/property/getPropertyList',
                {
					'propertyName':this.p.name,
                  size:this.p.pageSize,
                  current:this.p.pageNo,
				'token':i,
				},
                    function(res){
                    //   alert(res.data);
					this.propertyList = res.data.records;	// 数据
					this.dataCount = res.data.total;	// 分页
				}.bind(this),
                //  {res: mockDataList}
                {type:'get',res: mockDataList},
                 );
			},
			// 查看
			get: function(data) {
				var str = '<div>';
				str += '<p>编号：' + data.id + '</p>';
				str += '<p>名称：' + data.name + '</p>';
				str += '<p>状态：' + (data.status == 1 ? '正常' : '禁用') + '</p>';
				str += '<p>价格：' + (data.money / 100) + ' 元</p>';
				str += '<p>日期：' + (this.sa.forDate(data.create_time, 2)) + '</p>';
				str += '</div>';
				this.sa.alert(str);
			},
			// 	open: function(id) {
			// 	// this.id = id;
			// 	alert("哈哈哈哈："+id);
			// 	this.isShow = true;
			// 	if(id != 0){	// 如果是修改
			// 		// id 非 0 代表 是要修改 先查询一下，把旧值显示在input中
			// 		this.sa.ajax(
			// 			'/e-administrator/property/getProperty',
			// 			{ propertyId:this.id },
			// 			function(res) {
			// 			this.m = res.data;
			// 		}.bind(this),
			// 		// {res: this.getMockData(id)},
			// 		{type:'get'},
			// 		);
			// 	}
			// },
			// 添加
			add: function () {
				this.$refs['add-or-update'].open(0);
			},
			// 修改
			update: function (data) {

				this.$refs['add-or-update'].open(data);
				// this.sa.ajax(
				// 		'/e-administrator/property/updProperty',
				// 			{
				// 			propertyId:this.m.property_id,
				// 			propertyName:this.m.property_name,
				// 			propertyDetails:this.m.property_details,
				// 			propertyShare:0.2,
                //             propertySoftdel:this.m.property_softdel
				// 			},
				// 		function(res){

				// 		if(res.data){
				// 				this.sa.ok('修改成功');
				// 			}else{
				// 				this.sa.ok('修改失败');
				// 			}

				// 			// this.propertyList = res.data;	// 数据
				// 			// this.dataCount = res.dataCount;	// 分页
				// 		}.bind(this),
				// 	{type:'post'},
				// 	);
			},
			// 删除
			del: function (data) {
				// alert("删除红红火火恍恍惚惚或或:"+data);
				// this.sa.confirm('是否删除', function() {
					// this.sa.ajax(
					// 	'/e-administrator/property/delProperty',
					// 	{propertyId: data+'L'},
					// 	function() {
					// 	//   this.sa.arrayDelete(this.dataList, data);
					// 	this.sa.ok('删除成功');
					// }.bind(this)),
					// {type:'put'}
				// }.bind(this));

                this.sa.ajax(
						'/e-administrator/property/delProperty',
							{
							'propertyId': data
							},
						function(res){

						if(res.data){
								this.sa.ok('删除成功');
								this.f5();
							}else{
								this.sa.ok('删除失败');
								// this.f5();
							}

							// this.propertyList = res.data;	// 数据
							// this.dataCount = res.dataCount;	// 分页
						}.bind(this),
					{type:'put'},
					);

			},
		},
		created: function(){
			this.f5();
			this.$notify.info({
				title: '消息',
				message: '本页面展示表格的常见显示方式'
			});
		}
	}
</script>
